<script setup lang="ts">
import tree from "./tree.vue";
import { useCallAPI } from "./utils/hook";
import { message } from "@/utils/message";
import { ElMessageBox } from "element-plus";
import { ref, nextTick, watch, onMounted } from "vue";
import ListCard from "./components/ListCard.vue";
import ListDialogForm from "./components/ListDialogForm.vue";
defineOptions({
  name: "sub-api-manager"
});

const treeRef = ref();
const appInfoList = ref([]);
const curSelectNodeId = ref();

const {
  treeData,
  treeLoading,
  deviceDetection,
  paginationForCard,
  INITIAL_DATA,
  svg,
  dataLoading,
  apiInfoList,
  handleSizeChange,
  handleCurrentChange,
  getCardListData,
  initData
} = useCallAPI();

onMounted(async () => {
  treeLoading.value = true;
  // 应用清单
  initData();
  
  treeLoading.value = false;
  getCardListData("root");
});


function onTreeSelect({ pid, selected ,nodeType}) {
  const selectAppId: string = selected ? pid : "";
  getCardListData(selectAppId,nodeType);
  curSelectNodeId.value = selectAppId;
}
const formDialogVisible = ref(false);

const formData = ref({ ...INITIAL_DATA });
const searchValue = ref("");

const onPageSizeChange = (size: number) => {
  handleSizeChange(size);
};
const onCurrentChange = (current: number) => {
  handleCurrentChange(current);
};

const handleDeleteItem = product => {
  ElMessageBox.confirm(
    product
      ? `确认删除后${product.name}的所有产品信息将被清空, 且无法恢复`
      : "",
    "提示",
    {
      type: "warning"
    }
  )
    .then(() => {
      message("删除成功", { type: "success" });
    })
    .catch(() => { });
};
const handleManageProduct = product => {
  formDialogVisible.value = true;
  nextTick(() => {
    formData.value = { ...product, status: (product.lineStatus === 'on') ? "1" : "0" };
  });
};
</script>

<template>
  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
    <tree ref="treeRef" :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']" :treeData="treeData"
      :treeLoading="treeLoading" @tree-select-call="onTreeSelect" />
    <div :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']">
      <div class="w-full flex justify-between mb-4">
        
        <el-input v-model="searchValue" style="width: 300px" placeholder="请输入API名称" clearable>
          <template #suffix>
            <el-icon class="el-input__icon">
              <IconifyIconOffline v-show="searchValue.length === 0" icon="ri:search-line" />
            </el-icon>
          </template>
        </el-input>
      </div>
      <div v-loading="dataLoading" :element-loading-svg="svg" element-loading-svg-view-box="-10, -10, 50, 50">
        <el-empty v-show="apiInfoList
          .slice(
            paginationForCard.pageSize * (paginationForCard.page - 1),
            paginationForCard.pageSize * paginationForCard.page
          )
          .filter(v =>
            v.serviceName.toLowerCase().includes(searchValue.toLowerCase())
          ).length === 0
          " :description="`${searchValue} API不存在`" />
        <template v-if="paginationForCard.total > 0">
          <el-row :gutter="16">
            <el-col v-for="(apiInfo, index) in apiInfoList
              .slice(
                paginationForCard.pageSize * (paginationForCard.page - 1),
                paginationForCard.pageSize * paginationForCard.page
              )
              .filter(v =>
                v.serviceName.toLowerCase().includes(searchValue.toLowerCase())
              )" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">

              <ListCard :product="apiInfo" @delete-item="handleDeleteItem" @manage-product="handleManageProduct" />
            </el-col>
          </el-row>
          <el-pagination v-model:currentPage="paginationForCard.page" class="float-right"
            :page-size="paginationForCard.pageSize" :total="paginationForCard.total" :page-sizes="[12, 24, 36]"
            :background="true" layout="total, sizes, prev, pager, next, jumper" @size-change="onPageSizeChange"
            @current-change="onCurrentChange" />
        </template>
      </div>
      <ListDialogForm v-model:visible="formDialogVisible" :data="formData" :appList="appInfoList"
        :curAppId="curSelectNodeId"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-button:focus-visible) {
  outline: none;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
